<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1</title>
  <script src="./vue.js"></script>
  <style type="text/css">
  	h3{
		color: blue;
	}
  </style>
</head>
<body>
	<div id="directive" v-loading="isLoading">
		{{data}}
			<button @click="update">出现加载loading</button>
	</div>
  <div id="root">
		<button @click="boost">触发事件</button>
	</div>
  <script>
		Vue.directive('loading',function update(el,binding,vnode){
				if(binding.value){
					const div = document.createElement('div')
					div.innerHTML = '加载中...'
					div.setAttribute('id','loading')
					div.style.position = 'fixed'
					div.style.left = 0
					div.style.top = 0
					div.style.width = '100%'
					div.style.height = '100%'
					div.style.display = 'flex'
					div.style.justifyContent = 'center'
					div.style.alignItems = 'center'
					div.style.color = '#ffffff'
					div.style.background = 'rgba(0,0,0,.7)'
					document.body.append(div)
				}else{
					let div = document.getElementById('loading')
					div && document.body.removeChild(div)
				}
		})
		var app2 = new Vue({
			el:'#directive',
			data(){
				return {
					isLoading:false,
					data:''
				}
			},
			methods:{
				update(){
					this.isLoading = true
					setTimeout(()=>{
						this.data = '出现数据'
						this.isLoading = false
					},1000)
				}
			}
		})
	  var app1 = new Vue({
			el:'#root',
			data(){
				return {
					message:'hello vue'
				}
			},
			created(){
				// 定义事件和处理方法
				// this.$on('my_events',this.handleEvents)
				// // 可以同时定义多个事件，或者绑定多个处理方法
				// this.$on('my_events',this.handleEvents1)
				this.$on(['my_events','my_events1'],this.handleEvents)
				console.log(this._events)
			},
		  methods:{
				handleEvents(e){
					console.log(this.message,e)
				},
				handleEvents1(e){
					console.log('handleEvents1',e)
				},
				boost(){
					this.$emit('my_events1','my params')
				}
		  }
	  })
	  
  </script>
</body>
</html>